<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <button @click="list.push('赵六')">添加一个元素</button>
        <button @click="list.pop()">删一个元素</button>
          <ul>
            <!-- <li v-for="item in list">{{ item }}</li> -->
            <!-- <li v-for="(item, index) in list">{{ item }} --- {{ index }}</li> -->
            <!-- 名字可以随便写，跟顺序有关，先写的一定是每一项，后面的是下标 -->
            <li v-for="(v, i) in list">{{ v }} --- {{ i }}</li>
          </ul>

          <h2>以下是遍历对象</h2>
          <ul>
            <!-- item是属性值 -->
            <!-- <li v-for="item in obj">{{ item }}</li> -->

            <!-- 先写的一定是属性值，后写的是属性名 -->
            <!-- <li v-for="(item, key) in obj">{{ item }} --- {{ key }}</li> -->
            <li v-for="(v, k) in obj">{{ v }} --- {{ k }}</li>
          </ul>

          <h2>以下是遍历数字</h2>
          <ul>
            <!-- 指定次数循环--用的少 -->
            <!-- 循环3次，num是1到3 -->
            <li v-for="num in 3">{{ num }}</li>
          </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            list: ['张三', '李四', '王五'],

            obj: {
                name: 'jack',
                age: 16
            }
          }
        },
        methods: {
          
        }
      })
    </script>
  </body>
</html>